import React, { CSSProperties } from 'react';
import styled from 'styled-components'

interface IFaceIcon { 
  type: string;
  inline?: 'true' | 'false';
  isButton?: 'true' | 'false';
  size?: number;
  style?: CSSProperties
}

export const FaceIcon = styled.img`
  display: block;
  margin-top: ${props => -(props.size / 4)}px;
  &:hover {
    cursor: ${props => props.isButton === 'true' ? 'pointer' : 'default' };
  }
`

export const Faces = ({ type, size, style }: IFaceIcon) => {
  return <FaceIcon 
    width={size || 36}
    height={size || 36}
    size={size || 36}
    style={style}
    src={require(`../../assets/images/icon/face/${type || '4'}.png`)} 
  />
}

